<template>
	<div>
		<div v-if="productCode==='BA610025' || productCode==='BA610036'">
			<view class="details-container">
				<!-- mode="widthFix" -->
				<image :src="imgUrl" mode="widthFix"></image>
			</view>
		</div>
		<view v-if="productCode==='BA610033'">
			</br>
			<h4>车辆维修保养记录D</h4>
			</br>
			<view v-for="(item, index) in detailData" :key="index" class="details-content">
				<view>
					<view>
						<view class="info-desc">
							<text>进厂时间</text>
							<text>{{item.lastTime}}</text>
						</view>
						<view class="info-desc">
							<text>车架号</text>
							<text>{{item.vin}}</text>
						</view>
						<view class="info-desc">
							<text>公里数</text>
							<text>{{item.mileage}}</text>
						</view>
						<view class="info-desc">
							<text>维修类型</text>
							<text>{{item.repairType}}</text>
						</view>
						<view style="color:#ccc;">维修详情</view>
						<view v-for="(val, idx) in item.details">
							<view class="info-desc">
								<text>维修类型</text>
								<text>{{val.type}}</text>
							</view>
							<view class="info-desc">
								<text>项目详情</text>
								<text>{{val.content}}</text>
							</view>
						</view>
						<view style="color:#ccc;">材料详情</view>
						<view v-for="(val, idx) in item.materials">
							<view class="info-desc">
								<text>维修类型</text>
								<text>{{val.type}}</text>
							</view>
							<view class="info-desc">
								<text>项目详情</text>
								<text>{{val.content}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="productCode==='BA610019'">
			</br>
			<h4>车辆维修保养记录E</h4>
			</br>
			<view v-for="(item, index) in detailData.records" :key="index" class="details-content">
				<view>
					<view>
						<view class="info-desc">
							<text>出险时间</text>
							<text>{{item.date}}</text>
						</view>
						<view class="info-desc">
							<text>理赔车架号</text>
							<text>{{item.vin}}</text>
						</view>
						<view class="info-desc">
							<text>车辆类型</text>
							<text>{{item.mileage}}</text>
						</view>
						<view class="info-desc">
							<text>维修金额</text>
							<text>{{item.serviceMoney}}</text>
						</view>
						<view v-for="(val, idx) in item.result">
							<view class="info-desc">
								<text>理赔项类型</text>
								<text>{{val.dangerSingleType}}</text>
							</view>
							<view class="info-desc">
								<text>理赔名称</text>
								<text>{{val.dangerSingleName}}</text>
							</view>
							<view class="info-desc">
								<text>理赔金额</text>
								<text>{{val.dangerSingleMoney}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="productCode==='BA142032'">
			</br>
			<h4>查VIN</h4>
			</br>
			<view  class="details-content">
				<view>
					<view>
						<view class="info-desc">
							<text>品牌</text>
							<text>{{info.brand_name}}</text>
						</view>
						<view class="info-desc">
							<text>车辆型号</text>
							<text>{{info.model_no}}</text>
						</view>
						<view class="info-desc">
							<text>发动机号</text>
							<text>{{info.engine_no}}</text>
						</view>
						<view class="info-desc">
							<text>发动机型号</text>
							<text>{{info.engine_type}}</text>
						</view>
						<view class="info-desc">
							<text>排量</text>
							<text>{{info.displacement}}</text>
						</view>
						<view class="info-desc">
							<text>功率</text>
							<text>{{info.rated_power}}</text>
						</view>
						<view class="info-desc">
							<text>轴数</text>
							<text>{{info.axle_number}}</text>
						</view>
						<view class="info-desc">
							<text>轴距</text>
							<text>{{info.wheel_base}}</text>
						</view>
						<view class="info-desc">
							<text>前轮距</text>
							<text>{{info.front_wheel_distance}}</text>
						</view>
						<view class="info-desc">
							<text>后轮距</text>
							<text>{{info.back_wheel_distance}}</text>
						</view>
						<view class="info-desc">
							<text>总质量</text>
							<text>{{info.gross_mass}}</text>
						</view>
						<view class="info-desc">
							<text>整备质量</text>
							<text>{{info.unladen_mass}}</text>
						</view>
						<view class="info-desc">
							<text>额定载质量</text>
							<text>{{info.approved_load}}</text>
						</view>
						<view class="info-desc">
							<text>核定载客</text>
							<text>{{info.approved_number}}</text>
						</view>
						<view class="info-desc">
							<text>出厂日期</text>
							<text>{{info.release_date}}</text>
						</view>
						<view class="info-desc">
							<text>车辆类型</text>
							<text>{{info.vehicle_type_detail}}</text>
						</view>
						<view class="info-desc">
							<text>车身颜色</text>
							<text>{{info.body_color_detail}}</text>
						</view>
						<view class="info-desc">
							<text>燃料种类描述</text>
							<text>{{info.fuel_type_detail}}</text>
						</view>
						<view class="info-desc">
							<text>外廓长</text>
							<text>{{info.long}}</text>
						</view>
						<view class="info-desc">
							<text>外廓宽</text>
							<text>{{info.wide}}</text>
						</view>
						<view class="info-desc">
							<text>外廓高</text>
							<text>{{info.high}}</text>
						</view>
						<view class="info-desc">
							<text>排放标准</text>
							<text>{{info.emission_standard}}</text>
						</view>
						<view class="info-desc">
							<text>油耗</text>
							<text>{{info.oil_wear}}</text>
						</view>
						<view class="info-desc">
							<text>轮胎数</text>
							<text>{{info.tyre_number}}</text>
						</view>
						<view class="info-desc">
							<text>轮胎规格</text>
							<text>{{info.tyre_size}}</text>
						</view>
						<view class="info-desc">
							<text>轴荷</text>
							<text>{{info.axle_weight}}</text>
						</view>
						<view class="info-desc">
							<text>车身颜色</text>
							<text>{{info.body_color}}</text>
						</view>
						<view class="info-desc">
							<text>车辆类型</text>
							<text>{{info.vehicle_type}}</text>
						</view>
						<view class="info-desc">
							<text>燃料种类</text>
							<text>{{info.fuel_type}}</text>
						</view>
						<view class="info-desc">
							<text>车系</text>
							<text>{{info.vehicle_model}}</text>
						</view>
						<view class="info-desc">
							<text>车辆识别代号</text>
							<text>{{info.vin}}</text>
						</view>
						<view class="info-desc">
							<text>准牵引总质量</text>
							<text>{{info.traction_mass}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		</view>
		</view>
	</div>

</template>

<script>
	import {
		getDetail
	} from "@/api/infoList/index"
	import config from '@/config'
	import axios from 'axios';
	export default {
		components: {},
		data() {
			return {
				imgUrl: '',
				imgVin: '',
				productCode: '',

				detailData: [],
				info: {},

				productName: '',

			}
		},
		created() {
			this.init()
		},
		onLoad(option) {
			this.imgVin = option.vin
			this.productCode = option.productCode
			this.productName = option.productName
		},
		methods: {
			init() {
				// uni.request({
				// 	url: config.baseUrl + '/car/getCarInfo', //获取图片的URL
				// 	method: "post",
				// 	data: {},
				// 	responseType: 'arraybuffer',
				// 	success: (res) => { //得到的数据是二进制流
				// 		let url = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data);
				// 		url.replace("/", "").replace("/\/", "")
				// 		this.codeSrc = url
				// 		console.log(this.codeSrc)
				// 	},
				// 	fail(res) {

				// 	}
				// })
				uni.showLoading({
					title: '加载中'
				});
				getDetail({
					vin: this.imgVin,
					productCode: this.productCode,
					productName: this.productName
				}).then(res => {
					if (res.code === 200) {
						wx.setNavigationBarTitle({
							title: this.productName
						})
						if (this.productCode === 'BA610033') {
							let result = JSON.parse(res.data) || []
							this.detailData = result.data
						} else if (this.productCode === 'BA610019') {
							let result = JSON.parse(res.data) || []
							this.detailData = result
						}else if (this.productCode === 'BA142032') {
							let result = JSON.parse(res.data) || []
							this.info = result
						} else if (this.productCode === 'BA610025' || this.productCode === 'BA610036') {
							this.imgUrl = res.data
						}
					}
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.details-container {
		// 图片宽度平铺
		background: #fff;

		image {
			display: block;
			margin: 0 auto;
			// width: 100%;
			vertical-align: bottom;
			// will-change: transform; //解决加载时瞬间拉伸问题
			// // width: auto; //解决加载时瞬间拉伸问题
			// // height: auto; //解决加载时瞬间拉伸问题
			// image-rendering: -moz-crisp-edges;
			// image-rendering: -o-crisp-edges;
			// image-rendering: -webkit-optimize-contrast;
			// image-rendering: crisp-edges;
			// -ms-interpolation-mode: nearest-neighbor;


		}
	}

	.details-content {
		// height: calc(100vh - 240upx);
		border-bottom: 2upx solid #ccc;

		.info-scroll {
			height: 100%;
		}

		padding: 0 20upx;
		background: #fff;

		.info {
			&-title {
				padding: 20upx 0;
				border-bottom: 2upx solid #ccc;
			}

			&-desc {
				display: flex;
				justify-content: space-around;
				padding: 20upx 0;

				text {
					flex: 1;
				}
			}
		}

	}
	.details-info {
		// height: calc(100vh - 240upx);
		border-bottom: 2upx solid #ccc;
	
		.info-scroll {
			height: 100%;
		}
	
		padding: 0 20upx;
		background: #fff;
	
		.info {
			&-title {
				padding: 20upx 0;
				border-bottom: 2upx solid #ccc;
			}
	
			&-desc {
				display: flex;
				justify-content: space-around;
				padding: 20upx 0;
	
				text {
					flex: 1;
				}
			}
		}
	
	}
</style>